<template>
  <v-empty-state
    class="bg-surface"
    color="primary"
    :icon="mdiAlertCircleOutline"
    :text="msg"
    :title="t('error-page.title')"
  >
    <template #actions>
      <v-btn color="primary" :loading="isLoading" variant="flat" @click="reload">
        {{ t('error-page.reload') }}
      </v-btn>
    </template>
    <template #default>
      <div class="text-caption text-disabled mt-2">HTTP ERROR {{ code }}</div>
      <div class="text-caption text-medium-emphasis url-wrap">{{ url }}</div>
    </template>
  </v-empty-state>
</template>

<script lang="ts" setup>
import { mdiAlertCircleOutline } from '@mdi/js'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const props = defineProps<{
  url: string
  code?: string | number
  msg?: string
}>()
const isLoading = ref(false)

function reload() {
  isLoading.value = true
  // 重新加载props.url
  _pre_.tab.navigate(props.url)
}
</script>

<style scoped>
.url-wrap {
  overflow-wrap: anywhere; /* modern */
  word-break: break-word; /* fallback */
  white-space: normal;
  max-width: 700px;
}
</style>
<i18n>
{
  "zhHans": {
    "error-page": {
      "title": "无法访问此页面",
      "description": "当前无法处理此请求。",
      "reload": "刷新"
    }
  },
  "en": {
    "error-page": {
      "title": "This page cannot be accessed",
      "description": "The request cannot be processed.",
      "reload": "Reload"
    }
  }
}
</i18n>
